<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Remdator Examples</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="../../jquery-ext.js" type="text/javascript"></script>
<script src="../../remdator-exceptions.js" type="text/javascript"></script>
<script src="../../DataElement.js" type="text/javascript"></script>
<script src="../../CollectionDataElement.js" type="text/javascript"></script>
<script src="../../RadioTableFormElement.js" type="text/javascript"></script>

<script type="text/javascript">
<!--
	//logging functions
	function log($message, $bold)
	{
		if ($bold)
		{
			$("#message").append("<b>"+$message + "</b><br />");
		}
		else
		{
			$("#message").append($message + "<br />");
		}
	}
	function clearlog()
	{
		$("#message").html("");
	}
	//end logging functions
	
	
	
	var $radiotable = null;

	function create()
	{
		clearlog();
		
		$radiotable = $("#radiotable").remdator_radiotable({
			radioName : "name",
			fieldNames : [ "field1", "field2" ], //Identifier names of all fields in table (in order, excluding first field which is always reserved for the radio buttons and cannot be manipulated).
			scrollableParent : $("#scrollable")
		});
		
		$radiotable.addChangeListener({
			listener : function($eventArgs) {
				var $source = $eventArgs.source;
				
				log("Change listener has been triggered.");
				log("Value of remdator object that fired event: " + $source.getValue());
				log("<br />");
			}
		});
		
		$radiotable.loadItems({ items : [
			{ value : "row1", contents : { "field1" : "1", "field2" : "1" }, select : false },
			{ value : "row2", contents : { "field1" : "2", "field2" : "2" }, select : true }
			//If you are loading items into a radio table that is already loaded with items, you can set a "smartSelect : true" argument to make it select just the new item, the one after the deleted item or the same item if it is still there.
		]});
		
		log("Created radio table", true);
		log("Value of radio table: " + $radiotable.getValue());
		log("<br />");
	}
	
	function setValue()
	{
		clearlog();
		
		var $newvalue = $("#value").val();
		
		$radiotable.setValue({ value : $newvalue });
		
		log("Set value of radio table", true);
		log("Value of radio table: " + $radiotable.getValue());
		log("<br />");
	}
	
	function addItem()
	{
		clearlog();
		
		var $newvalue = $("#value").val();
		var $field1 = $("#field1").val();
		var $field2 = $("#field2").val();
		
		$radiotable.addItem({ value : $newvalue, contents : { "field1" : $field1, "field2" : $field2 } });
		
		log("Added a new item to radio table", true);
		log("Value of radio table: " + $radiotable.getValue());
		log("<br />");
	}
	
	function addItemSelect()
	{
		clearlog();
		
		var $newvalue = $("#value").val();
		var $field1 = $("#field1").val();
		var $field2 = $("#field2").val();
		
		$radiotable.addItem({ value : $newvalue, contents : { "field1" : $field1, "field2" : $field2 }, select : true });
		
		log("Added a new item to radio table and selected it", true);
		log("Value of radio table: " + $radiotable.getValue());
		log("<br />");
	}
	
	function addItemAsHTML()
	{
		clearlog();
		
		var $newvalue = $("#value").val();
		var $field1 = $("#field1").val();
		var $field2 = $("#field2").val();
		
		$radiotable.addItem({ value : $newvalue, contents : { "field1" : $field1, "field2" : $field2 }, isHTML : ["field1", "field2"] });
		
		log("Added a new item to radio table as html", true);
		log("Value of radio table: " + $radiotable.getValue());
		log("<br />");
	}
	
	function updateItem()
	{
		clearlog();
		
		var $existingvalue = $("#value").val();
		var $field1 = $("#field1").val();
		var $field2 = $("#field2").val();
		
		$radiotable.updateItem({ value : $existingvalue, contents : { "field1" : $field1, "field2" : $field2 } });
		
		log("Updated an item in radio table", true);
		log("Value of radio table: " + $radiotable.getValue());
		log("<br />");
	}
	
	function updateItemSelected()
	{
		clearlog();
		
		var $field1 = $("#field1").val();
		var $field2 = $("#field2").val();
		
		$radiotable.updateItem({ value : "", contents : { "field1" : $field1, "field2" : $field2 } });
		
		log("Updated an item in radio table", true);
		log("Value of radio table: " + $radiotable.getValue());
		log("<br />");
	}
	
	function deleteItemSelected()
	{
		clearlog();
		
		$radiotable.deleteItem({ value : "" });
		
		log("Deleted an item in radio table", true);
		log("Value of radio table: " + $radiotable.getValue());
		log("<br />");
	}
	
	function getAll()
	{
		clearlog();
		
		var $items = $radiotable.getAll();
		for ($value in $items)
		{
			log("value: " + $value);
			log("field1: " + $items[$value]["field1"].text());
			log("field2: " + $items[$value]["field2"].text());
			log("<br />");
		}
		
		log("Got all items in radio table", true);
		log("Value of radio table: " + $radiotable.getValue());
		log("<br />");
	}
	
	function getContentsSelected()
	{
		clearlog();
		
		var $contents = $radiotable.getContents({ value : "" });
		log("field1: " + $contents["field1"].text());
		log("field2: " + $contents["field2"].text());
		log("<br />");
		
		log("Got all items in radio table", true);
		log("Value of radio table: " + $radiotable.getValue());
		log("<br />");
	}
	
	function isItemExist()
	{
		clearlog();
		
		var $existingvalue = $("#value").val();
		
		var $result = $radiotable.isItemExist({ value : $existingvalue });
		
		log("Checked if given value exists.", true);
		log("Result: " + $result);
		log("<br />");
	}
	
	function numItems()
	{
		clearlog();
		
		var $result = $radiotable.numItems();
		
		log("Counted number of items.", true);
		log("Result: " + $result);
		log("<br />");
	}
	
	function isEmpty()
	{
		clearlog();
		
		var $result = $radiotable.isEmpty();
		
		log("Checked if radio table is empty.", true);
		log("Result: " + $result);
		log("<br />");
	}
	
	function clearItems()
	{
		clearlog();
		
		$radiotable.clearItems();
		
		log("Cleared radio table", true);
		log("<br />");
	}
	
	function inverseReference()
	{
		clearlog();
		
		var $remdatorObj = $("table").data("remdator");
		
		log("Got hold of radio table through jQuery data of HTML table", true);
		log("Value of radio table: " + $remdatorObj.getValue());
		log("<br />");
	}
	
	$(document).ready(function() {
		create();
	});
//-->
</script>  
</head>
<body>
	<div id="message"></div>
	
	<div id="scrollable" style="border-style:solid; height:200px; overflow:auto;">
		<table border="1" id="radiotable">
			<thead><tr><th>Radio button</th><th>field1</th><th>field2</th></tr></thead>
			<tbody><tr><td></td><th></th><td style="background-color:yellow;"></td></tr></tbody>
		</table>
	</div>
	
	<input type="button" value="Recreate radio table" onclick="create();" /><br />
	<input type="button" value="Set value" onclick="setValue();" /><br />
	<input type="button" value="Add item" onclick="addItem();" /><br />
	<input type="button" value="Add item and select it" onclick="addItemSelect();" /><br />
	<input type="button" value="Add item as HTML" onclick="addItemAsHTML();" /><br />
	<input type="button" value="Update an item" onclick="updateItem();" /><br />
	<input type="button" value="Update selected item" onclick="updateItemSelected();" /><br />
	<input type="button" value="Delete selected item" onclick="deleteItemSelected();" /><br />
	<input type="button" value="Get all items" onclick="getAll();" /><br />
	<input type="button" value="Get contents of selected row" onclick="getContentsSelected();" /><br />
	<input type="button" value="Check if value exists" onclick="isItemExist();" /><br />
	<input type="button" value="Count number of items" onclick="numItems();" /><br />
	<input type="button" value="Check if empty" onclick="isEmpty();" /><br />
	<input type="button" value="Clear table" onclick="clearItems();" /><br />
	<input type="button" value="Access inverse reference to radio table" onclick="inverseReference();" /><br />
	Value: <input type="text" id="value" /><br />
	field1: <input type="text" id="field1" /> field2: <input type="text" id="field2" /><br />
	
	The radio table element is an html table with a radio button for each row, where the data in each row reflects some remote data, that is, the data is obtained from a remote script via ajax and the radio table sends requests to update the remote data via ajax.
</body>
</html>